<template>
  <div class="settings-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2>系统设置</h2>
        <p>个性化您的系统体验和偏好设置</p>
      </div>
      <div class="header-actions">
        <el-button :icon="Refresh" @click="refreshSettings">刷新</el-button>
        <el-button type="primary" :icon="Check" @click="saveSettings" :loading="saving">
          保存设置
        </el-button>
      </div>
    </div>

    <div class="settings-content">
      <el-row :gutter="24">
        <!-- 左侧：设置分类 -->
        <el-col :xs="24" :lg="6">
          <el-card class="category-card">
            <template #header>
              <h3>设置分类</h3>
            </template>
            
            <div class="category-menu">
              <div 
                class="category-item" 
                v-for="category in categories" 
                :key="category.key"
                :class="{ active: activeCategory === category.key }"
                @click="activeCategory = category.key"
              >
                <el-icon :size="18" :color="category.color">
                  <component :is="category.icon" />
                </el-icon>
                <span>{{ category.name }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：设置内容 -->
        <el-col :xs="24" :lg="18">
          <!-- 外观设置 -->
          <el-card v-show="activeCategory === 'appearance'" class="settings-card">
            <template #header>
              <h3>外观设置</h3>
            </template>
            
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-info">
                  <h4>主题模式</h4>
                  <p>选择您喜欢的界面主题</p>
                </div>
                <div class="setting-control">
                  <el-radio-group v-model="settings.theme" @change="handleThemeChange">
                    <el-radio-button label="light">浅色</el-radio-button>
                    <el-radio-button label="dark">深色</el-radio-button>
                    <el-radio-button label="auto">跟随系统</el-radio-button>
                  </el-radio-group>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>主题色彩</h4>
                  <p>自定义系统的主色调</p>
                </div>
                <div class="setting-control">
                  <div class="color-picker-group">
                    <div 
                      class="color-option" 
                      v-for="color in themeColors" 
                      :key="color.name"
                      :class="{ active: settings.primaryColor === color.value }"
                      :style="{ backgroundColor: color.value }"
                      @click="settings.primaryColor = color.value"
                    >
                      <el-icon v-if="settings.primaryColor === color.value" color="white">
                        <Check />
                      </el-icon>
                    </div>
                    <el-color-picker 
                      v-model="settings.primaryColor" 
                      size="large"
                      show-alpha
                    />
                  </div>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>字体大小</h4>
                  <p>调整界面文字的显示大小</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.fontSize" style="width: 120px">
                    <el-option label="小" value="small" />
                    <el-option label="中" value="medium" />
                    <el-option label="大" value="large" />
                  </el-select>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>紧凑模式</h4>
                  <p>减少界面元素间距，显示更多内容</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.compactMode" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>动画效果</h4>
                  <p>启用或关闭界面过渡动画</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.animations" />
                </div>
              </div>
            </div>
          </el-card>

          <!-- 语言设置 -->
          <el-card v-show="activeCategory === 'language'" class="settings-card">
            <template #header>
              <h3>语言和地区</h3>
            </template>
            
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-info">
                  <h4>界面语言</h4>
                  <p>选择系统界面显示语言</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.language" style="width: 150px">
                    <el-option label="简体中文" value="zh-CN" />
                    <el-option label="繁體中文" value="zh-TW" />
                    <el-option label="English" value="en-US" />
                    <el-option label="日本語" value="ja-JP" />
                  </el-select>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>时区设置</h4>
                  <p>设置您所在的时区</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.timezone" style="width: 200px">
                    <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                    <el-option label="东京时间 (UTC+9)" value="Asia/Tokyo" />
                    <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                    <el-option label="伦敦时间 (UTC+0)" value="Europe/London" />
                  </el-select>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>日期格式</h4>
                  <p>选择日期的显示格式</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.dateFormat" style="width: 150px">
                    <el-option label="YYYY-MM-DD" value="YYYY-MM-DD" />
                    <el-option label="MM/DD/YYYY" value="MM/DD/YYYY" />
                    <el-option label="DD/MM/YYYY" value="DD/MM/YYYY" />
                    <el-option label="YYYY年MM月DD日" value="YYYY年MM月DD日" />
                  </el-select>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>数字格式</h4>
                  <p>设置数字和货币的显示格式</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.numberFormat" style="width: 150px">
                    <el-option label="1,234.56" value="en" />
                    <el-option label="1.234,56" value="de" />
                    <el-option label="1 234,56" value="fr" />
                    <el-option label="1,234.56" value="zh" />
                  </el-select>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 通知设置 -->
          <el-card v-show="activeCategory === 'notifications'" class="settings-card">
            <template #header>
              <h3>通知设置</h3>
            </template>
            
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-info">
                  <h4>桌面通知</h4>
                  <p>在桌面显示系统通知</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.desktopNotifications" @change="handleDesktopNotificationChange" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>声音提醒</h4>
                  <p>通知时播放提示音</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.soundNotifications" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>邮件通知</h4>
                  <p>通过邮件接收重要通知</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.emailNotifications" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>短信通知</h4>
                  <p>通过短信接收紧急通知</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.smsNotifications" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>通知时间</h4>
                  <p>设置接收通知的时间段</p>
                </div>
                <div class="setting-control">
                  <el-time-picker
                    v-model="settings.notificationTime"
                    is-range
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="HH:mm"
                    value-format="HH:mm"
                  />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>免打扰模式</h4>
                  <p>在指定时间段内不接收通知</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.doNotDisturb" />
                </div>
              </div>
            </div>
          </el-card>

          <!-- 数据设置 -->
          <el-card v-show="activeCategory === 'data'" class="settings-card">
            <template #header>
              <h3>数据和隐私</h3>
            </template>
            
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-info">
                  <h4>数据同步</h4>
                  <p>自动同步您的数据到云端</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.dataSync" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>数据备份</h4>
                  <p>定期备份重要数据</p>
                </div>
                <div class="setting-control">
                  <el-select v-model="settings.backupFrequency" style="width: 120px">
                    <el-option label="每日" value="daily" />
                    <el-option label="每周" value="weekly" />
                    <el-option label="每月" value="monthly" />
                    <el-option label="关闭" value="never" />
                  </el-select>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>使用统计</h4>
                  <p>允许收集匿名使用统计数据</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.analytics" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>错误报告</h4>
                  <p>自动发送错误报告帮助改进产品</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.errorReporting" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>数据导出</h4>
                  <p>导出您的个人数据</p>
                </div>
                <div class="setting-control">
                  <el-button type="primary" @click="exportData">导出数据</el-button>
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>清除缓存</h4>
                  <p>清除本地缓存数据</p>
                </div>
                <div class="setting-control">
                  <el-button @click="clearCache">清除缓存</el-button>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 高级设置 -->
          <el-card v-show="activeCategory === 'advanced'" class="settings-card">
            <template #header>
              <h3>高级设置</h3>
            </template>
            
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-info">
                  <h4>开发者模式</h4>
                  <p>启用开发者工具和调试功能</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.developerMode" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>实验性功能</h4>
                  <p>启用正在测试的新功能</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.experimentalFeatures" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>API 端点</h4>
                  <p>自定义 API 服务器地址</p>
                </div>
                <div class="setting-control">
                  <el-input 
                    v-model="settings.apiEndpoint" 
                    placeholder="https://api.example.com"
                    style="width: 250px"
                  />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>调试日志</h4>
                  <p>启用详细的调试日志记录</p>
                </div>
                <div class="setting-control">
                  <el-switch v-model="settings.debugLogging" />
                </div>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4>重置设置</h4>
                  <p>将所有设置恢复为默认值</p>
                </div>
                <div class="setting-control">
                  <el-button type="danger" @click="resetSettings">重置设置</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Refresh, Check, Monitor, Globe, Bell, Shield, Setting
} from '@element-plus/icons-vue'
import { themeManager } from '@/utils/theme'

// 响应式数据
const saving = ref(false)
const activeCategory = ref('appearance')

// 设置分类
const categories = ref([
  {
    key: 'appearance',
    name: '外观设置',
    icon: 'Monitor',
    color: '#409EFF'
  },
  {
    key: 'language',
    name: '语言地区',
    icon: 'Globe',
    color: '#67C23A'
  },
  {
    key: 'notifications',
    name: '通知设置',
    icon: 'Bell',
    color: '#E6A23C'
  },
  {
    key: 'data',
    name: '数据隐私',
    icon: 'Shield',
    color: '#F56C6C'
  },
  {
    key: 'advanced',
    name: '高级设置',
    icon: 'Setting',
    color: '#909399'
  }
])

// 主题颜色选项
const themeColors = ref([
  { name: '默认蓝', value: '#409EFF' },
  { name: '成功绿', value: '#67C23A' },
  { name: '警告橙', value: '#E6A23C' },
  { name: '危险红', value: '#F56C6C' },
  { name: '信息灰', value: '#909399' },
  { name: '紫色', value: '#722ED1' },
  { name: '青色', value: '#13C2C2' },
  { name: '粉色', value: '#EB2F96' }
])

// 设置数据
const settings = reactive({
  // 外观设置
  theme: 'light',
  primaryColor: '#409EFF',
  fontSize: 'medium',
  compactMode: false,
  animations: true,

  // 语言设置
  language: 'zh-CN',
  timezone: 'Asia/Shanghai',
  dateFormat: 'YYYY-MM-DD',
  numberFormat: 'zh',

  // 通知设置
  desktopNotifications: true,
  soundNotifications: true,
  emailNotifications: true,
  smsNotifications: false,
  notificationTime: ['09:00', '18:00'],
  doNotDisturb: false,

  // 数据设置
  dataSync: true,
  backupFrequency: 'weekly',
  analytics: true,
  errorReporting: true,

  // 高级设置
  developerMode: false,
  experimentalFeatures: false,
  apiEndpoint: 'https://api.example.com',
  debugLogging: false
})

// 方法
const refreshSettings = () => {
  ElMessage.success('设置已刷新')
}

const saveSettings = () => {
  saving.value = true

  try {
    // 保存设置到本地存储
    localStorage.setItem('app-settings', JSON.stringify(settings))

    // 应用设置
    applyThemeSettings()

    // 如果语言发生变化，提示用户刷新页面
    const savedLanguage = localStorage.getItem('app-language')
    if (savedLanguage && savedLanguage !== settings.language) {
      localStorage.setItem('app-language', settings.language)
      ElMessageBox.confirm(
        '语言设置已更改，需要刷新页面才能生效。是否立即刷新？',
        '语言设置',
        {
          confirmButtonText: '立即刷新',
          cancelButtonText: '稍后刷新',
          type: 'info'
        }
      ).then(() => {
        window.location.reload()
      }).catch(() => {
        ElMessage.info('请手动刷新页面以应用语言设置')
      })
    } else {
      localStorage.setItem('app-language', settings.language)
    }

    setTimeout(() => {
      saving.value = false
      ElMessage.success('设置保存成功')
    }, 500)
  } catch (error) {
    saving.value = false
    ElMessage.error('设置保存失败')
    console.error('保存设置失败:', error)
  }
}

const handleThemeChange = (theme) => {
  ElMessage.success(`已切换到${theme === 'light' ? '浅色' : theme === 'dark' ? '深色' : '自动'}主题`)
  applyThemeSettings()
}

const applyThemeSettings = () => {
  // 使用主题管理器应用设置
  themeManager.applyTheme(settings)

  // 保存设置到本地存储
  localStorage.setItem('app-settings', JSON.stringify(settings))
}

const handleDesktopNotificationChange = (value) => {
  if (value) {
    // 请求通知权限
    if ('Notification' in window) {
      if (Notification.permission === 'granted') {
        ElMessage.success('桌面通知已启用')
        // 发送测试通知
        setTimeout(() => {
          new Notification('系统通知', {
            body: '桌面通知已成功启用！',
            icon: '/favicon.ico',
            tag: 'test-notification'
          })
        }, 1000)
      } else if (Notification.permission === 'denied') {
        settings.desktopNotifications = false
        ElMessage.error('通知权限已被拒绝，请在浏览器设置中手动启用')
      } else {
        Notification.requestPermission().then(permission => {
          if (permission === 'granted') {
            ElMessage.success('桌面通知已启用')
            // 发送测试通知
            setTimeout(() => {
              new Notification('系统通知', {
                body: '桌面通知已成功启用！',
                icon: '/favicon.ico',
                tag: 'test-notification'
              })
            }, 1000)
          } else {
            settings.desktopNotifications = false
            ElMessage.warning('请在浏览器设置中允许通知权限')
          }
        })
      }
    } else {
      settings.desktopNotifications = false
      ElMessage.error('您的浏览器不支持桌面通知')
    }
  } else {
    ElMessage.success('桌面通知已关闭')
  }
}

const exportData = () => {
  ElMessageBox.confirm(
    '确定要导出您的个人数据吗？导出的数据将包含您的个人信息和使用记录。',
    '确认导出',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 收集要导出的数据
    const exportDataObj = {
      settings: settings,
      userInfo: {
        name: localStorage.getItem('user-name') || '未设置',
        email: localStorage.getItem('user-email') || '未设置',
        loginTime: new Date().toISOString()
      },
      systemInfo: {
        browser: navigator.userAgent,
        language: navigator.language,
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        exportTime: new Date().toISOString()
      }
    }

    // 创建并下载JSON文件
    const dataStr = JSON.stringify(exportDataObj, null, 2)
    const dataBlob = new Blob([dataStr], { type: 'application/json' })
    const url = URL.createObjectURL(dataBlob)

    const link = document.createElement('a')
    link.href = url
    link.download = `user_data_export_${new Date().toISOString().split('T')[0]}.json`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(url)

    ElMessage.success('数据导出成功，文件已下载到本地')
  }).catch(() => {
    ElMessage.info('已取消导出')
  })
}

const clearCache = () => {
  ElMessageBox.confirm(
    '清除缓存后，您需要重新登录，确定要继续吗？',
    '确认清除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    try {
      // 清除localStorage中的缓存数据（保留重要的用户设置）
      const keysToKeep = ['app-settings', 'app-language', 'user-token']
      const dataToKeep = {}

      keysToKeep.forEach(key => {
        const value = localStorage.getItem(key)
        if (value) {
          dataToKeep[key] = value
        }
      })

      // 清除所有localStorage
      localStorage.clear()

      // 恢复重要设置
      Object.keys(dataToKeep).forEach(key => {
        localStorage.setItem(key, dataToKeep[key])
      })

      // 清除sessionStorage
      sessionStorage.clear()

      // 清除浏览器缓存（如果支持）
      if ('caches' in window) {
        caches.keys().then(names => {
          names.forEach(name => {
            caches.delete(name)
          })
        })
      }

      ElMessage.success('缓存已清除')

      // 提示用户刷新页面
      setTimeout(() => {
        ElMessageBox.confirm(
          '缓存清除完成，建议刷新页面以确保更改生效。',
          '刷新页面',
          {
            confirmButtonText: '立即刷新',
            cancelButtonText: '稍后刷新',
            type: 'info'
          }
        ).then(() => {
          window.location.reload()
        })
      }, 1000)

    } catch (error) {
      ElMessage.error('清除缓存失败')
      console.error('清除缓存失败:', error)
    }
  }).catch(() => {
    ElMessage.info('已取消清除')
  })
}

const resetSettings = () => {
  ElMessageBox.confirm(
    '确定要重置所有设置吗？此操作不可撤销。',
    '确认重置',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 重置设置到默认值
    Object.assign(settings, {
      theme: 'light',
      primaryColor: '#409EFF',
      fontSize: 'medium',
      compactMode: false,
      animations: true,
      language: 'zh-CN',
      timezone: 'Asia/Shanghai',
      dateFormat: 'YYYY-MM-DD',
      numberFormat: 'zh',
      desktopNotifications: true,
      soundNotifications: true,
      emailNotifications: true,
      smsNotifications: false,
      notificationTime: ['09:00', '18:00'],
      doNotDisturb: false,
      dataSync: true,
      backupFrequency: 'weekly',
      analytics: true,
      errorReporting: true,
      developerMode: false,
      experimentalFeatures: false,
      apiEndpoint: 'https://api.example.com',
      debugLogging: false
    })

    ElMessage.success('设置已重置为默认值')
    applyThemeSettings()
  }).catch(() => {
    ElMessage.info('已取消重置')
  })
}

// 加载保存的设置
const loadSettings = () => {
  try {
    const savedSettings = localStorage.getItem('app-settings')
    if (savedSettings) {
      const parsedSettings = JSON.parse(savedSettings)
      Object.assign(settings, parsedSettings)
    }

    const savedLanguage = localStorage.getItem('app-language')
    if (savedLanguage) {
      settings.language = savedLanguage
    }
  } catch (error) {
    console.error('加载设置失败:', error)
    ElMessage.warning('加载保存的设置失败，使用默认设置')
  }
}

// 监听系统主题变化
const watchSystemTheme = () => {
  if (window.matchMedia) {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    mediaQuery.addEventListener('change', (e) => {
      if (settings.theme === 'auto') {
        applyThemeSettings()
      }
    })
  }
}

// 监听设置变化，实时应用主题
watch(() => settings.primaryColor, (newColor) => {
  themeManager.setPrimaryColor(newColor)
}, { immediate: false })

watch(() => settings.theme, (newTheme) => {
  themeManager.setThemeMode(newTheme)
}, { immediate: false })

watch(() => settings.fontSize, (newSize) => {
  themeManager.setFontSize(newSize)
}, { immediate: false })

watch(() => settings.compactMode, (newMode) => {
  themeManager.setCompactMode(newMode)
}, { immediate: false })

watch(() => settings.animations, (newAnimations) => {
  themeManager.setAnimations(newAnimations)
}, { immediate: false })

// 生命周期
onMounted(() => {
  // 加载保存的设置
  loadSettings()

  // 应用当前主题设置
  applyThemeSettings()

  // 监听系统主题变化
  watchSystemTheme()
})
</script>

<style scoped>
.settings-page {
  padding: 0;
  background-color: transparent;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-content h2 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.header-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 内容区域 */
.settings-content {
  margin-bottom: 24px;
}

.settings-content .el-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.settings-content .el-card :deep(.el-card__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.settings-content .el-card :deep(.el-card__header) h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* 分类菜单 */
.category-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
}

.category-item:hover {
  background: #f0f0f0;
  color: #333;
}

.category-item.active {
  background: #409EFF;
  color: white;
}

.category-item span {
  font-size: 14px;
  font-weight: 500;
}

/* 设置区域 */
.settings-section {
  padding: 20px 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.setting-control {
  flex-shrink: 0;
  margin-left: 20px;
}

/* 颜色选择器 */
.color-picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-option {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.color-option:hover {
  transform: scale(1.1);
}

.color-option.active {
  border-color: #333;
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .settings-content .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .header-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .category-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .category-item {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

  .setting-item {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
  }

  .setting-control {
    margin-left: 0;
    width: 100%;
  }

  .setting-control .el-select,
  .setting-control .el-input {
    width: 100% !important;
  }

  .color-picker-group {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .settings-page {
    padding: 0 16px;
  }

  .page-header {
    padding: 16px;
  }

  .settings-content .el-card :deep(.el-card__body) {
    padding: 16px;
  }

  .category-menu {
    flex-direction: column;
  }

  .category-item {
    min-width: auto;
    justify-content: flex-start;
  }

  .setting-item {
    padding: 16px 0;
  }

  .header-actions {
    flex-direction: column;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
  }

  .color-option {
    width: 28px;
    height: 28px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
  .settings-content .el-card :deep(.el-card__body) {
    padding: 12px;
  }

  .setting-item {
    padding: 12px 0;
  }

  .setting-info h4 {
    font-size: 14px;
  }

  .setting-info p {
    font-size: 12px;
  }

  .color-option {
    width: 24px;
    height: 24px;
  }
}

/* 主题相关样式 */
:global(.dark-theme) {
  background-color: #1a1a1a;
  color: #ffffff;
}

:global(.dark-theme .el-card) {
  background-color: #2d2d2d;
  border-color: #404040;
}

:global(.dark-theme .el-card__header) {
  background-color: #2d2d2d;
  border-bottom-color: #404040;
}

:global(.compact-mode) {
  --el-component-size: small;
}

:global(.compact-mode .el-card) {
  margin-bottom: 12px;
}

:global(.compact-mode .setting-item) {
  padding: 12px 0;
}

:global(.no-animations *) {
  transition: none !important;
  animation: none !important;
}

/* 深色主题下的设置页面样式 */
:global(.dark) .settings-page {
  background-color: #1a1a1a;
}

:global(.dark) .page-header {
  background-color: #2d2d2d;
  color: #ffffff;
}

:global(.dark) .category-item {
  color: #cccccc;
}

:global(.dark) .category-item:hover {
  background-color: #404040;
  color: #ffffff;
}

:global(.dark) .category-item.active {
  background-color: var(--el-color-primary);
  color: #ffffff;
}

:global(.dark) .setting-item {
  border-bottom-color: #404040;
}

:global(.dark) .setting-info h4 {
  color: #ffffff;
}

:global(.dark) .setting-info p {
  color: #cccccc;
}
</style>
